<template>
	<view class="content">
		<u-sticky offset-top="0" bgColor="#fff">
			<view class="top_view flex">
				<input type="text" class="top_view_input" v-model="keyword" placeholder="请输入药品或医生名称" >
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/close.png"
					v-show="keyword"
					class="top_view_input_close"
					@click="keyword='';choose_tap('')" ></image>
				<view class="top_view_input_right" @click="choose_tap('')">
					搜索
				</view>
			</view>
			<view class="tap">
				<view class="tap_item"
					v-for="(item,index) in tabs"
					:key="index"
					:class="{'item_active':tap_index == item.value}"
					@click="choose_tap(item.value)">
						{{item.label}}
					<view class="tap_item_active" v-show="tap_index == item.value"></view>
				</view>
			</view>
		</u-sticky>
		<view v-for="(item,index) in list" :key="index">
			<product-item :item="item" v-if="tap_index==1"></product-item>
			<doctor-item :item="item" v-if="tap_index==2"></doctor-item>
		</view>
		<u-loadmore v-if="pages.page>pages.totalPage&&pages.totalPage" status="nomore" />
		<view v-if="list.length == 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import { getSearch } from '../../api/common.js';
	import doctorItem from '@/components/doctor-item.vue';
	import productItem from '@/components/product-item.vue';
	export default {
  components: { doctorItem,productItem },
		data() {
			return {
				keyword:'',
				tap_index:1,
				list:[],
				tabs:[{label:'药品',value:1},{label:'医生',value:2}],
				pages:{
					page:1,
					size:10,
					totalPage:null
				}
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.pages = {
				page:1,
				size:10,
				totalPage:null
			}
			Promise.all([this.getList()]).then(res => {
				uni.stopPullDownRefresh()
			})
		},
		// 加载
		onReachBottom() {
			this.pages.page++
			const {page,totalPage} = this.pages
			if (page <= totalPage) {
				uni.showLoading({
					title: '请稍等'
				})
				this.getList()
			} else return
		},
		methods: {
			choose_tap(num){
				this.list = []
				if(num){
					this.tap_index = num
					this.keyword = ''
				}
				this.pages = {
					page:1,
					size:10,
					totalPage:null
				}
				this.getList()
			},
			getList(){
				let params={
					name:this.keyword,
					...this.pages
				}
				getSearch(this.tap_index==1?'shop_goods':'doctor',params).then(res=>{
					uni.hideLoading()
					if(res.code == 200001){
						let list = res.data.data
						this.list = this.pages.page == 1 ? list : this.list.concat(list)
						this.pages.totalPage = res.data.last_page
					} else {
						this.$showToast(res.message)
					}
				})
			},
		}
	}
</script>

<style>
.content{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.top_view_input_close{
		width: 28rpx;
		height: 28rpx;
	}
	.top_view{
		width: 100%;
		height: 76rpx;
		border-radius: 40rpx;
		background: #FFF;
		padding: 0 30rpx;
		box-sizing: border-box;
		border: 1px solid #0165FB;
	}
	.top_view_icon{
		width: 44rpx;
		height: 44rpx;
	}
	.top_view_input{
		width: 70%;
	}
	.top_view_input_right{
		width: 108rpx;
		color: #0165FB;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		height: 24rpx;
		line-height: 24rpx;
		border-left: 1rpx solid #DFDFDF;
	}
	.tap{
		padding: 30rpx 0 0;
		box-sizing: border-box;
	}
	.tap_item{
		display: inline-block;
		padding: 0 20rpx;
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
	}
	.tap_item_active{
		width: 20rpx;
		height: 4rpx;
		background: #0165FB;
		margin: 0 auto;
		margin-top: 8rpx;
	}
	.item_active{
		color: #333;
	}
	
	
	
	.list_item_min{
		margin-top: 40rpx;
	}
	.list_item_min_item{
		width: 200rpx;
		text-align: center;
	}
	.list_item_min_item_bottom{
		color: #444;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 22rpx;
		font-weight: 400;
		margin-top: 12rpx;
	}
	.list_item_min_item_top{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
	}
	.list_item_bottom{
		margin-top: 30rpx;
	}
	.list_item_bottom_left{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
	}
	.list_item_bottom_left_num{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 36rpx;
		font-weight: 700;
		margin-left: 6rpx;
	}
	.list_item_bottom_right{
		width: 244rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background:linear-gradient(270deg, #0165FB 0%, #7AA7EB 100%);
		justify-content: center;
	}
	.list_item_bottom_right_img{
		width: 36rpx;
		height: 36rpx;
	}
	.list_item_bottom_right_text{
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 700;
		margin-left: 12rpx;
	}
	
	.list_m{
		width: 100%;
	}
	
</style>
